<style>
	.label-cell {
		width: 25%;
	}
	.content-cell {
		width: 75%;
	}
</style>

<div class="api-doc-component" [class.deprecated]="apiDocs().deprecated">
	<h3 [id]="apiDocs().className">
		<a
			routerLink="."
			fragment="{{ apiDocs().className }}"
			class="title-fragment"
			title="Anchor link to: {{ apiDocs().className }}"
		>
			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: var(--bs-heading-color)"></i>
		</a>
		{{ apiDocs().className }}
		<a
			class="github-link"
			(click)="trackSourceClick()"
			href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{ apiDocs().fileName }}"
			target="_blank"
			title="Link to Github: {{ apiDocs().className }}"
		>
			<i class="bi bi-github" style="font-size: 1.5rem; color: var(--bs-heading-color)"></i>
		</a>
	</h3>
	<ngbd-api-docs-badge
		[type]="apiDocs().type"
		[deprecated]="apiDocs().deprecated"
		[since]="apiDocs().since"
	></ngbd-api-docs-badge>
	@if (apiDocs().deprecated) {
		<p>{{ apiDocs().deprecated?.description }}</p>
	}
	<p class="lead" [innerHTML]="apiDocs().description"></p>

	@if (apiDocs().properties && apiDocs().properties.length) {
		<section>
			<h4>Properties</h4>
			<table class="table table-sm">
				<tbody>
					@for (prop of apiDocs().properties; track prop) {
						<tr [class.deprecated]="prop.deprecated">
							<td class="label-cell">
								<code>{{ prop.name }}</code
								><br />
								@if (prop.since) {
									<span class="badge bg-info text-dark">since {{ prop.since.version }}</span>
								}
								&ngsp;
								@if (prop.deprecated) {
									<span class="badge bg-secondary">deprecated {{ prop.deprecated.version }}</span>
								}
							</td>
							<td class="content-cell">
								@if (prop.deprecated) {
									<p>{{ prop.deprecated.description }}</p>
								}
								<p class="description" [innerHTML]="prop.description"></p>
								<div class="meta">
									<div>
										<i>Type: </i><code>{{ prop.type }}</code>
									</div>
									@if (prop.defaultValue) {
										<div>
											<i>Default value: </i><code>{{ prop.defaultValue || '-' }}</code>
										</div>
									}
								</div>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</section>
	}

	@if (apiDocs().methods && apiDocs().methods.length) {
		<section>
			<h4>Methods</h4>
			<table class="table table-sm">
				<tbody>
					@for (method of apiDocs().methods; track method) {
						<tr [class.deprecated]="method.deprecated">
							<td class="label-cell">
								<code>{{ method.name }}</code
								><br />
								@if (method.since) {
									<span class="badge bg-info text-dark">since {{ method.since.version }}</span>
								}
								&ngsp;
								@if (method.deprecated) {
									<span class="badge bg-secondary">deprecated {{ method.deprecated.version }}</span>
								}
							</td>
							<td class="content-cell">
								<p class="signature">
									<code>{{ methodSignature(method) }}</code
									>&ngsp;
									<small class="text-muted" title="Return type">=&gt; {{ method.returnType }}</small>
								</p>
								@if (method.deprecated) {
									<p>{{ method.deprecated.description }}</p>
								}
								<p class="description" [innerHTML]="method.description"></p>
							</td>
						</tr>
					}
				</tbody>
			</table>
		</section>
	}
</div>
